$(function(){
	for(var i=0;i<4;i++){
		$("<div></div>").addClass("poos").html('  <img src="../fstvgo/201508141424542951762.jpg" alt=" " title=""/><p> 油中的优品油好品牌值的信赖 <span>¥666</span> </p> ').appendTo( $(".prosBox") );
	}
	
});

$.ajax({
	type:"get",
	url:"../data/dataPro.json",
	async:true,
	success:function(mpros){
		url = location.href;
		url = url.split("?");
		url = url[1].split("=");
		id = url[1];
		console.log(id);
		for(var i=0;i<mpros.length;i++){
			if( id == mpros[i].id ){
				fidsrc = mpros[i].src;
				fidprice = mpros[i].price;
				fiddis = mpros[i].dis;
				fidjifen = mpros[i].jifen;
				//库存量是可以设置后获取的,后续完善,先这么多
			}
		}
		console.log(fiddis+fidjifen+fidprice+fidsrc) //成功取到用户点击的商品信息
		console.log(document.cookie);
		$("#mai").click(function(){
//			alert(1);
			var inpCount = $(".nowCount").val();  //购买数量.其他的在cookie中
			
			window.location.href = "../html/shoppingCar.html?count="+inpCount+"";
//			console.log(inpCount);
			
			
		})
		$("#car").click(function(){
			alert("已经成功添加!");
			var inpCount = $(".nowCount").val();  //购买数量,其他的在cookie中
			window.location.href = "../html/shoppingCar.html?count="+inpCount+"";
		})

	$(".picSmall").html(' <div id="smallImg" style="position: absolute; background:url('+ fidsrc +') center; background-size: cover; top: 0px; left:0px; width:500px; height:460px;"><div id="smallCursor" style="position: absolute; left: 0; top: 0; display:none; width: 150px; height: 150px; background: rgba(200,198,255,0.8);"></div></div><div id="bigCursor" style="display:none; position: absolute; height:460px; width:460px; left: 500px; top: 0px; background: rgba(200,198,255,0.1); overflow: hidden;"><img id="bigImg" style="position: absolute; left: 0px; top: 0px;width:600px;height:600px" src="'+ fidsrc +'"/></div> ');
	$(".picsm1").attr("src"," " + fidsrc+ " ");
	$(".picsm2").attr("src"," " + fidsrc+ " ");
	$(".picsm3").attr("src"," " + fidsrc+ " ");
	$(".bigPic").attr("src"," " + fidsrc+ " ");
	$(".bigpic1").attr("src"," " + fidsrc+ " ");
	$(".nowjiage").html( fidprice );
	
		var $objSmallImg = $("#smallImg");  //小图框
		var $objSmallCur = $("#smallCursor");//滤镜      小图可视区
		
		var $objBigImg = $("#bigImg");//大图
		var $objBigCur = $("#bigCursor");//大图可视区
		
		//重新计算 小图可视区的宽度 和高度  （之前不具备分析的比例）
//		$objSmallCur.outerWidth( $objSmallImg.outerWidth() * $objBigCur.outerWidth() / $objBigImg.outerWidth() );
//		$objSmallCur.outerHeight( $objSmallImg.outerHeight() * $objBigCur.outerHeight() / $objBigImg.outerHeight() );
		
		//console.log( $objSmallCur.outerWidth()  + "," + $objSmallCur.outerHeight());
		
		//大小可视区的比例
		var scale = $objBigCur.outerWidth() / $objSmallCur.outerWidth();
		
		$objSmallImg.mousemove(function(e){
//			alert(1)
			var evt = e  ||  event ;
//			var left = evt.clientX ;
//			var top =  evt.clientY ;
			var left = evt.clientX - $objSmallImg.offset().left - $objSmallCur.outerWidth()/2;
			var top =  evt.clientY - $objSmallImg.offset().top - $objSmallCur.outerHeight()/2;
			
			var leftSide = $objSmallImg.offset().left + $objSmallCur.outerWidth()/2;
			var topSide = $objSmallImg.offset().top + $objSmallCur.outerHeight()/2;
			
			var rightSide = $objSmallImg.offset().left + $objSmallImg.outerWidth() -  $objSmallCur.outerWidth()/2;
			var bottomSide = $objSmallImg.offset().top + $objSmallImg.outerHeight() -  $objSmallCur.outerHeight()/2;
			
//			if (evt.clientX >= leftSide && evt.clientX <= rightSide && evt.clientY >= topSide && evt.clientY <= bottomSide) {
//				alert(1);
				$objSmallCur.css({
				"display":"block",
				"top": top,
				"left":left
				})
				$objBigCur.css({
				"display":"block"
				})
				$objBigImg.css({
					"top": -scale * top +300,
					"left":-scale * left +600
				})				
//			}
			
		}).mouseleave(function(){
			$objSmallCur.css({
				"display":"none",
				
				})
				
			$objBigCur.css({
				"display":"none"
				})			
		})



//放大镜效果完事,详情2换一个思路
//以下是图片切换,点击更换详情1和详情2放大镜的图片
var a = 3 ;   //a=1 
$(".proleft ul li").eq(0).click(function(){
	if(a==3){
		$(".proleft ul li").eq(3).css("border-color","red").siblings().css("border-color","silver");
		$("#smallImg").css({
			"background":"url("+ fidsrc +") no-repeat",
			"background-size":"cover"
		});
		$objBigImg.attr("src",""+  fidsrc  +"");
		$(".Smallpic").find("img").eq(2).css("right",0).siblings().css("right",-500);
		$(".bigPicBox").find("img").attr("src"," ../fstvgo/201607082134287134912.jpg ");
		
		
		a--;
	}else if(a==2){
		$(".proleft ul li").eq(2).css("border-color","red").siblings().css("border-color","silver");
		$("#smallImg").css({
			"background":"url("+ fidsrc +") no-repeat",
			"background-size":"cover"
		});
		$objBigImg.attr("src",""+ fidsrc +"");
		
		
		$(".Smallpic").find("img").eq(1).css("right",0).siblings().css("right",-500);
		$(".bigPicBox").find("img").attr("src"," "+ fidsrc +"");
		a--;
	}else if(a==1){
		$(".proleft ul li").eq(1).css("border-color","red").siblings().css("border-color","silver");
		$("#smallImg").css({
			"background":"url("+ fidsrc +") no-repeat",
			"background-size":"cover"
		});
		$objBigImg.attr("src",""+ fidsrc +"");
		
		$(".Smallpic").find("img").eq(0).css("right",0).siblings().css("right",-500);
		$(".bigPicBox").find("img").attr("src",""+ fidsrc +"");
		a = 3;
	}
});
$(".proleft ul li").eq(4).click(function(){
	if(a==1){
		$(".proleft ul li").eq(3).css("border-color","red").siblings().css("border-color","silver");
		$("#smallImg").css({
			"background":"url("+ fidsrc +") no-repeat",
			"background-size":"cover"
		});
		$objBigImg.attr("src",""+ fidsrc +"");
		$(".Smallpic").find("img").eq(2).css("right",0).siblings().css("right",-500);
		$(".bigPicBox").find("img").attr("src",""+ fidsrc +"");
		
		a++;
	}else if(a==2){
		$(".proleft ul li").eq(2).css("border-color","red").siblings().css("border-color","silver");
		$("#smallImg").css({
			"background":"url("+ fidsrc +") no-repeat",
			"background-size":"cover"
		});
		$objBigImg.attr("src",""+ fidsrc +"");
		$(".Smallpic").find("img").eq(1).css("right",0).siblings().css("right",-500);
		$(".bigPicBox").find("img").attr("src",""+ fidsrc +"");
		
		a++;
	}else if(a==3){
		$(".proleft ul li").eq(1).css("border-color","red").siblings().css("border-color","silver");
		$("#smallImg").css({
			"background":"url("+ fidsrc +") no-repeat",
			"background-size":"cover"
		});
		$objBigImg.attr("src",""+ fidsrc +"");
		
		$(".Smallpic").find("img").eq(0).css("right",0).siblings().css("right",-500);
		$(".bigPicBox").find("img").attr("src",""+ fidsrc +"");
		a = 1;
	}
});

$(".proleft ul li").eq(1).click(function(){
	$(this).css("border-color","red").siblings().css("border-color","silver");
	$("#smallImg").css({
		"background":"url("+ fidsrc +") no-repeat",
		"background-size":"cover"
	});
	$objBigImg.attr("src",""+ fidsrc +"");
	
	$(".Smallpic").find("img").eq(0).css("right",0).siblings().css("right",-500);
	$(".bigPicBox").find("img").attr("src",""+ fidsrc +"");
});
$(".proleft ul li").eq(2).click(function(){
	$(this).css("border-color","red").siblings().css("border-color","silver");
	$("#smallImg").css({
		"background":"url("+ fidsrc +") no-repeat",
		"background-size":"cover"
	});
	$objBigImg.attr("src",""+ fidsrc +"");
	$(".Smallpic").find("img").eq(1).css("right",0).siblings().css("right",-500);
	$(".bigPicBox").find("img").attr("src",""+ fidsrc +"");
});
$(".proleft ul li").eq(3).click(function(){
	$(this).css("border-color","red").siblings().css("border-color","silver");
	$("#smallImg").css({
		"background":"url("+ fidsrc +") no-repeat",
		"background-size":"cover"
	});
	$objBigImg.attr("src",""+ fidsrc +"");
	$(".Smallpic").find("img").eq(2).css("right",0).siblings().css("right",-500);
	$(".bigPicBox").find("img").attr("src",""+ fidsrc +"");
});
$(".xqp").find("img").css("border","3px solid white");
$(".xqp").find("img").click(function(){
	$(this).css("border","3px solid red").siblings().css("border","3px solid white");
});

//以上是详情1的js (切换的部分是1和2共有的)



//详情2的放大镜
$(".Smallpic").mousemove(function(e){
 	var oDamo=$(".Smallpic"),     // 小图的框
//	    oSimg=$(".bigpic img"),   
	    oFloat=$(".lj"),    //滤镜
	    oShow=$(".bigPicBox"),     //大图的框
	    oBimg=$(".bigPic"), //大图
	    baifen=oShow.width()/oFloat.width(),
	    iX="",iY="",MaxX="",MaxY="";
	    
	    
		iX = e.pageX - $(this).offset().left - oFloat.width()/2,
        iY = e.pageY - $(this).offset().top - oFloat.height()/2,
        MaxX = oDamo.width()-oFloat.width(),
        MaxY = oDamo.height()-oFloat.height();
        iX = iX > 0 ? iX : 0;
        iX = iX < MaxX ? iX : MaxX;
        iY = iY > 0 ? iY : 0;
        iY = iY < MaxY ? iY : MaxY;
	$(".bigPicBox").css("display","block"); //大图的框出来
	$(".lj").css({                          //滤镜出来  并且鼠标在其中心位置
		"left":iX,
		"top":iY,
		"display":"block"
	});
	
	$(".bigPic").css({					//大图框的里面的    大图    位置改变
		"top":-baifen*iY,
		"left":-baifen*iX,
	})
	
}).mouseleave(function(){
	$(".bigPicBox").css("display","none"); //大图的框出来
	$(".lj").css({                          //滤镜出来
		"display":"none"
	});
});

//详情页面2的放大镜
//引用不好用
//var newMirror = new mirror($(".Smallpic"),$(".bigPicBox"),$(".lj"),$(".bigPic"));
//以下是详情2的图片切换

		
	}
});





































